<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="练02_style.css">
    <title>Document</title>
</head>

<body>
    <h1>人员管理系统</h1>
    <div class="page">
        <input id="name" placeholder="name">
        <input id="age" placeholder="age">
        <button id="save">保存</button>
    </div>
    <!-- 表格 -->
    <table>
        <!-- 表头 -->
        <thead>
            <tr>
                <th class="n">
                    姓名
                </th>
                <th class="a">
                    年龄
                </th>
            </tr>
        </thead>
        <tbody id="list">

        </tbody>
    </table>
    <button id="upload">上传</button>
</body>
<script>
    // 第二种写法:====================
    let model = [];

    let controller = {
        add() {
            let name = document.getElementById('name').value;
            let age = document.getElementById('age').value;

            model.push({ name, age });
            view.update();
        },
        upload() { console.log(model); }

    };

    let view = {
        update() {
            let data = model;
            let list = '';
            data.forEach(({ name, age }) => {
                list += `
            <tr>
                <td>${name}</td>
                <td>${age}</td>
            </tr>
            `;
            });

            document.getElementById('list').innerHTML = list;
        }
    };

    document.getElementById('save').addEventListener('click', () => { controller.add(); });
    document.getElementById('upload').addEventListener('click', () => { controller.upload(); });
    // ======================


    // 第一种写法:-------------
    // let result = []
    // document.getElementById('save').addEventListener('click', () => {
    // let name = document.getElementById('name').value;
    // let age = document.getElementById('age').value;

    // let list = `
    //     <tr>
    //         <td>${name}</td>
    //         <td>${age}</td>
    //     </tr>
    //     `
    // // 字符串拼接
    // document.getElementById('list').innerHTML += list;
    // result.push({ name, age });
    // });

    // document.getElementById('upload').addEventListener('click', () => {
    //     // let listElement = document.getElementById('list');
    //     // let lineElement = listElement.querySelectorAll('tr');
    //     // let result = [];
    //     // lineElement.forEach(item => {
    //     //     let tds = item.querySelectorAll('td');
    //     //     let name = tds[0].innerText;
    //     //     let age = tds[1].innerText;
    //     //     result.push({ name, age });
    //     // });
    //     console.log(result);
    // });

    let arr = [
        {
            name: 'li hua', age: '11'
        },
        {
            name: 'xiaoming', age: '10'
        }
    ];
    // -------------------

</script>

</html>